<template>
  <app-layout left-active="/syntax">

    <message
        v-show="showMsg"
        :title="msgTitle"
        type="error">
    </message>

    <el-form :inline="true" :model="searchStr" class="search-panel" size="medium">
      <el-form-item label="语法内容">
        <el-input v-model="searchStr.syntaxContent" @keyup.native.enter="onSubmit"></el-input>
      </el-form-item>
      <el-form-item label="语法类型">
        <el-select v-model="searchStr.syntaxType" value="" @change="typeChange">
          <el-option value=""></el-option>
          <el-option v-for="dict in dicts" :key="dict.dictKey" :label="dict.dictValue" :value="dict.dictKey"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSubmit" type="primary">查询</el-button>
        <el-button @click="onReset" plain>重置</el-button>
      </el-form-item>
      <el-form-item class="pull-right">
      <el-button @click="addDialogVisible = true" type="primary" icon="el-icon-plus">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        height="calc(100% - 105px)"
        style="width: 100%">
      <el-table-column
          prop="syntaxType"
          label="类型"
          width="100">
      </el-table-column>
      <el-table-column
          prop="syntaxContent"
          label="语法内容">
      </el-table-column>
      <el-table-column
          prop="syntaxCreateTime"
          label="创建时间"
          width="180">
      </el-table-column>
      <el-table-column
          fixed="right"
          width="120">
        <template slot-scope="scope">
          <el-button
              @click.native.prevent="editRow(scope.$index, tableData)"
              type="text"
              size="small">
            编辑
          </el-button>
          <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pager
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        :total="total"
        :currentPage="currentPage"
        :page-size="pageSize">
    </pager>

    <syntax-add
        :add-dialog-visible="addDialogVisible"
        @closeDialog="closeDialog"
        :dicts="dicts">
    </syntax-add>

    <syntax-edit
        :edit-dialog-visible="editDialogVisible"
        :form-data="formData"
        @closeDialog="closeDialog"
        :dicts="dicts">
    </syntax-edit>

  </app-layout>
</template>

<script>
  import AppLayout from '../../templates/layout/AppLayout'
  import Message from '../../templates/message/Message'
  import Pager from '../../templates/pager/Pager'
  import SyntaxAdd from './SyntaxAdd'
  import SyntaxEdit from './SyntaxEdit'

  export default {
    data() {
      return {
        tableData: [],
        loading: true,

        // 数据字典，子模版也用到，所以统一传值
        dicts: [],

        // 错误信息
        showMsg: false,
        msgTitle: '',

        // 分页器
        total: 0,
        currentPage: 1,
        pageSize: 20,

        // 表单查询
        searchStr: {
          syntaxContent: '',
          syntaxType: ''
        },

        addDialogVisible: false,
        editDialogVisible: false,
        formData: {}
      }
    },
    name: 'syntax',
    components: {AppLayout, Message, Pager, SyntaxAdd, SyntaxEdit},
    mounted() {
      this.$nextTick(function() {
        this.initTable()
        let _this = this
        this.$http.get('/dict/0001')
          .then(function(response) {
            if (response.success) {
              _this.dicts = response.data.resultData
            }
          })
      })
    },
    methods: {
      initTable() {
        let _this = this
        this.$http.get('/syntax', {
          params: {
            limit: this.pageSize,
            page: this.currentPage,
            searchStr: this.searchStr
          }})
          .then(function(response) {
            _this.successFun(response)
          })
          .catch(function(error) {
            _this.failureFun(error)
          })
      },
      successFun(response) {
        if (response.success) {
          this.tableData = response.data.resultData.content
          this.showMsg = false
          this.total = response.data.resultData.totalElements
        } else {
          this.showMsg = true
          this.msgTitle = response.data.resultMessage
        }
        this.loading = false
      },
      failureFun(error) {
        this.showMsg = true
        this.msgTitle = error.message
        this.loading = false
      },
      handleSizeChange(pageSize) {
        this.currentPage = 1
        this.pageSize = pageSize
        this.initTable()
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
        this.initTable()
      },
      onSubmit() {
        this.initTable()
      },
      onReset() {
        this.searchStr = {}
        this.initTable()
      },
      typeChange(val) {
        this.searchStr.syntaxType = val
        this.initTable()
      },
      editRow(index, rows) {
        this.editDialogVisible = true
        this.formData = rows[index]
      },
      deleteRow(index, rows) {
        this.$confirm('永久删除该记录, 是否继续?', '提示信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          let _this = this
          this.$http.post('/syntax/delete', rows[index])
            .then(function(response) {
              _this.initTable()
            })
            .catch(function(error) {
              _this.failureFun(error)
            })
        })
      },
      closeDialog() {
        this.addDialogVisible = false
        this.editDialogVisible = false
        this.initTable()
      }
    }
  }
</script>

<style>
  .search-panel {
    border-bottom: 1px solid #ebeef5;
  }
  .search-panel .el-form-item {
    margin-bottom: 15px !important;
  }
</style>